<!-- 列表 骨架屏 -->
<template>
	<view class="list">
		<view class="list-item" v-for="value in 1" :key="value">
			<image class="shop-pic skeleton-animate"  mode="aspectFill"></image>
			<view class="content">
				<view class="header">
					<view class="top">
						<text class="name skeleton-animate">　</text>
					</view>
					<view class="middle">
						<text class="label skeleton-animate">　</text>
					</view>
					<view class="bottom">
						<text class="tag skeleton-animate" v-for="idx in 4" :key="idx"></text>
					</view>
				</view>
				<view class="body">
					<view class="item" v-for="idx in 3" :key="idx">
						<image class="pic skeleton-animate" mode="aspectFit"></image>
						<text class="name skeleton-animate">　</text>
						<text class="price skeleton-animate">　</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.list {
		padding: 0 25rpx;
	
		&-item {
			display: flex;
			margin-top: 20rpx;
			padding: 26rpx 15rpx 20rpx 20rpx;
			background-color: white;
			border-radius: 15px;
			transition: background-color 0.2s;
	
			.shop-pic {
				flex-shrink: 0;
				width: 140rpx;
				height: 140rpx;
				border-radius: 14rpx;
				object-fit: cover;
				object-position: center;
				margin-right: 24rpx;
			}
	
			.content {
				flex-grow: 1;
				width: 0;
	
				.header {
					height: 146rpx;
					border-bottom: 2rpx dashed #E5E5E5;
	
					.top {
						display: flex;
						align-items: flex-end;
	
						.name {
							flex-grow: 1;
							font-weight: bold;
							font-size: 30rpx;
							color: #222222;
							line-height: 1.5;
						}
					}
	
					.middle {
						display: flex;
						margin-top: 8rpx;
	
						.label {
							flex-grow: 1;
							font-weight: 500;
							font-size: 22rpx;
							color: #999999;
							line-height: 1.5;
						}
					}
	
					.bottom {
						display: flex;
						margin-top: 14rpx;
	
						.tag {
							min-width: 88rpx;
							height: 30rpx;
							font-weight: 500;
							font-size: 20rpx;
							line-height: 30rpx;
							border-radius: 8rpx;
							padding: 0 6rpx;
	
							&+.tag {
								margin-left: 14rpx;
							}
						}
					}
				}
	
				.body {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					column-gap: 40rpx;
					padding-top: 26rpx;
	
					.item {
						display: flex;
						flex-direction: column;
						align-items: center;
						overflow: hidden;
	
						.pic {
							width: 100%;
							height: 100rpx;
						}
	
						.name {
							width: 100%;
							font-size: 22rpx;
							line-height: 1.5;
							margin-top: 14rpx;
						}
	
						.price {
							width: 100%;
							font-size: 26rpx;
							line-height: 1.5;
							margin-top: 4rpx;
						}
					}
	
				}
			}
		}
	}
</style>